<template>
  <div class="container mx-auto">
    <div class="my-8">
      <vue-glide :perView="1" :bullet="true" class="mb-12">

          <vue-glide-slide>
              <img src="@/assets/nav/nav1.jpg" alt="mandalorian" class="rounded" />
          </vue-glide-slide>

          <vue-glide-slide>
              <img src="@/assets/nav/nav2.jpg" alt="mandalorian" class="rounded" />
          </vue-glide-slide>

          <vue-glide-slide>
              <img src="@/assets/nav/nav3.jpg" alt="mandalorian" class="rounded" />
          </vue-glide-slide>


          <template slot="control">
            <button data-glide-dir="<" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top: calc(50% - 16px); left: 10px">
              <svg width="18" height="10" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M0 12l10.975 11 2.848-2.828-6.176-6.176H24v-3.992H7.646l6.176-6.176L10.975 1 0 12z"></path>
              </svg>
            </button>
            <button data-glide-dir=">" class="absolute w-8 h-8 rounded-full bg-gray-500" style="top: calc(50% - 16px); right: 10px">
              <svg width="18" height="10" viewBox="0 0 24 24" style="margin-left: 6px">
                <path d="M13.025 1l-2.847 2.828 6.176 6.176h-16.354v3.992h16.354l-6.176 6.176 2.847 2.828 10.975-11z"></path>
              </svg>
            </button>
          </template>
        </vue-glide>

      <div class="categories mb-12">
        <vue-glide
          :perView="5"
          :gap="20"
          :breakpoints="{
            1024: {
              perView: 3
            },
            800: {
              perView: 2,
            },
            576: {
              perView: 1,
              peek: {
                before: 0,
                after: 0,
              }
            }
          }"
        >


        </vue-glide>
      </div> <!-- end categories -->


    </div>
    <div>
    <el-form :inline="true" v-model="spotQuery" class="demo-form-inline">
      <el-form-item label="搜  索：" align="center">
        <el-input v-model="spotQuery.name" placeholder="请输入搜索信息"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSpotList()">查询</el-button>
        <el-button type="info" @click="clearData">清空</el-button>
      </el-form-item>
    </el-form>


    <el-table
            ref="multipleTable"
            :data="list"
            border
            stripe
            fit
            highlight-current-row
            tooltip-effect="dark"
            @selection-change="handlerSelectionChange"
            element-loading-text="数据加载中"
            style="width: 100%">


      <el-table-column
              prop="spotName"
              label="名称"
              align="center"
              width="150">
      </el-table-column>



      <el-table-column
              prop="spotContent"
              label="景点内容"
              align="center"
              width="350">
      </el-table-column>

      <el-table-column
              prop="spotIntro1"
              label="景点简介"
              align="center"
              width="190">
      </el-table-column>
      <el-table-column
              prop="spotIntro2"
              label="景点简介"
              align="center"
              width="350">
      </el-table-column>

      <el-table-column
              prop="spotQueue"
              label="排队人数"
              align="center"
              sortable
              width="107">
      </el-table-column>

      <el-table-column
              prop="id"
              label="操作"
              align="center"
              width="100">
        <template slot-scope="scope">
          <router-link :to="'/about/'+scope.row.spotId">
            <el-button type="primary" size="mini" icon="el-icon-edit">
              查看
            </el-button>
          </router-link>
        </template>
      </el-table-column>


    </el-table>

    <el-pagination
            background
            :current-page="pageNum"
            :page-size="pageSize"
            style="padding: 30px 0;text-align:center"
            :total="total"
            layout="total,prev, pager, next,jumper"
            @current-change="getSpotList"
    >
    </el-pagination>
    </div>
  </div>
</template>

<script>
    import spotApi from '@/api/spot.js'

    export default {
        name: "list",
        data() {
            return {
                pageNum: 1,
                pageSize: 7,
                spotQuery: {
                    name: ''
                },
                list: [],
                total: 0,
            }
        },
        created() {
            //生命周期方法，页面渲染之前执行
            this.getSpotList();
        },
        methods: {
            getSpotList(currnet = 1) {
                this.pageNum = currnet
                spotApi.list(this.pageNum, this.pageSize, this.spotQuery)
                    .then(response => {
                        this.list = response.data.data.list;
                        this.total = response.data.data.total;
                    })
            },
            clearData() {
                //清空查询条件
                this.spotQuery = {}
                this.getSpotList()
            },
            handlerSelectionChange() {
                //处理表格项选择发生改变事件

            }
        }
    }
</script>
